<template>
  <div class="app-container">
    <form-filter @on-filter="submitFilterForm" @handleExport="handleExport"/>
    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..." class="mgtop"  >
      <el-table-column label="日期"  prop="createDate" align="center"  >
        <template slot-scope="{row}">{{row.createDate | toTime('YYYY-MM-DD')}}</template>
      </el-table-column>
      <el-table-column label="数量" align="center">
         <el-table-column label="新增黑名单"  prop="countNum" align="center" >
          </el-table-column>
          <el-table-column label="新增账号黑名单"  prop="usernameNum" align="center" >
          </el-table-column>
          <el-table-column label="新增IP黑名单"  prop="ipNum" align="center" >
          </el-table-column>
          <el-table-column label="新增设备号黑名单"  prop="deviceIdNum" align="center" >
          </el-table-column>
          <el-table-column label="新增银行卡黑名单"  prop="bankCardNum" align="center" >
          </el-table-column>
          <el-table-column label="新增手机号黑名单"  prop="mobileNum" align="center" >
          </el-table-column>
          <el-table-column label="新增姓名黑名单"  prop="realNameNum" align="center" >
          </el-table-column>
      </el-table-column>
     <el-table-column label="次数" align="center">
       <el-table-column label="注册触发"  prop="registerTriggerNum" align="center" >
      </el-table-column>
      <el-table-column label="登录触发"  prop="loginTriggerNum" align="center" >
      </el-table-column>
      <el-table-column label="提现触发"  prop="withdrawTriggerNum" align="center" >
      </el-table-column>
      <el-table-column label="充值分层触发"  prop="rechargeChangeUserLevelTriggerNum" align="center" >
      </el-table-column>
      <el-table-column label="提现分层触发"  prop="withdrawChangeUserLevelTriggerNum" align="center" >
      </el-table-column>
     </el-table-column>

      <!-- <el-table-column label="返水触发次数"  prop="rebateTriggerNum" align="center" >
      </el-table-column> -->
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="Number(tableData.total)">
      </el-pagination>
    </div>

  </div>
</template>
<script>
import FormFilter from './statisticFilter.vue';
import { grid } from '@/build';
import { blackListReport, blackListExportReport } from '@/services/api/risk';

export default {
  name: 'leval-record',
  mixins: [grid],
  components: {
    FormFilter,
  },

  data() {
    return {
      tableData: {
        list: [],
        total: 0,
      },
      filters: {
        page: 1,
        size: 20,
        startDate: moment().valueOf(),
        endDate: moment().valueOf(),
      },
      filename: '黑名单统计报表.csv',
      execlHeader: [
        '日期',
        '新增黑名单数量',
        '新增账号黑名单数量',
        '新增IP黑名单数量',
        '新增设备号黑名单数量',
        '新增银行卡黑名单数量',
        '新增手机号黑名单数量',
        '新增姓名黑名单数量',
        '注册触发次数',
        '登录触发次数',
        '提现触发次数',
        '充值分层触发次数',
        '提现分层触发次数',
        // '返水触发次数',
      ],
      execlColumn: [
        'createDate',
        'countNum',
        'usernameNum',
        'ipNum',
        'deviceIdNum',
        'bankCardNum',
        'mobileNum',
        'realNameNum',
        'registerTriggerNum',
        'loginTriggerNum',
        'withdrawTriggerNum',
        'rechargeChangeUserLevelTriggerNum',
        'withdrawChangeUserLevelTriggerNum',
        // 'rebateTriggerNum',
      ],
    };
  },

  methods: {
    submitFilterForm(formInline) {
      const { time } = formInline;
      if (!_.isUndefined(time) && _.isArray(time)) {
        this.filters.startDate = moment(time[0]).valueOf();
        this.filters.endDate = moment(time[1]).valueOf();
        // [this.filters.startDate, this.filters.endDate] = time;
        // formInline = { ...formInline, msg_start_time, msg_end_time };
      } else {
        this.filters.startDate = undefined;
        this.filters.endDate = undefined;
      }

      this.filters = { ...this.filters, ...formInline };
      this.doGet({ action: 'getGrid' });
    },
    handleExport(formInline) {
      const { page, size } = this.filters;
      const { time } = formInline;
      let startDate;
      let endDate;
      if (!_.isUndefined(time) && _.isArray(time)) {
        startDate = moment(time[0]).valueOf();
        endDate = moment(time[1]).valueOf();
        // [startDate, endDate] = time;
      }

      const ajaxData = {
        page, size, startDate, endDate,
      };

      blackListExportReport(ajaxData).then(([result, data]) => {
        if (result) {
          const exportData = this.responseFormatter(data.list);
          this.export2Excel(this.execlHeader, this.execlColumn, exportData, this.filename);
        } else {
          this.$message({ message: `导出失败,${data.message}`, type: 'warning' });
        }
      });
    },
    responseFormatter(data) {
      // const endData = [];
      data.map((item) => {
        item.createDate = _.toTime(item.createDate, 'YYYY-MM-DD');
      });
      return data;
      // return endData;
    },
  },
  mounted() {
    this.bindGet(blackListReport, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },
};
</script>
